<template>
	<div id="container" style="height: 300px"></div>
</template>

<script>
	// import echarts from "echarts ";
	export default {
		name: 'timeShare',
		data() {
			return {
				option:{
					backgroundColor: '#21202D',
					legend: {
						data:[1,2,3,4,5],
						inactiveColor: '#777',
						textStyle: {
							color:'#fff'
						}
					},
					tooltip: {
						trigger:'axis',
						axisPointer: {
							animation:true,
							type: 'cross',
							lineStyle: {
								color:'#376df4',
								width: 2,
								opacity:1
							}
						}
					},
					xAxis: {
						type:'category',
						data: ['j','a','v','a','s','c','r','i','p','t'],
						axisLine: { lineStyle: { color: '#8392A5' }}

					},
					yAxis: [{
						scale: true,
						axisLine: {
							lineStyle:{
								color:'#8392a5'
							}
						},
						splitLine: {
							show:false
						}
					},
					{
						scale: true,
						position:'right',
						axisLine: {
							lineStyle:{
								color:'#8392a5'
							}
						},
						splitLine: {
							show:false
						}
					},
					],
					grid: {
						bottom:80
					},
					dataZoom: [{
		        textStyle: {
		            color: '#8392A5'
		        },
		        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
		        handleSize: '10%',
		        dataBackground: {
		            areaStyle: {
		                color: '#8392A5'
		            },
		            lineStyle: {
		                opacity: 0.8,
		                color: '#8392A5'
		            }
		        },
		        handleStyle: {
		            color: '#fff',
		            shadowBlur: 3,
		            shadowColor: 'rgba(0, 0, 0, 0.6)',
		            shadowOffsetX: 2,
		            shadowOffsetY: 2
		        }
			    }, 
			    {
			        type: 'inside'
			    }],
			    animation:true,
			    series: [
			    	{
			    		name: 'MA5',
		            type: 'line',
		            data: [1,5,4,7,8,6,3,2,4,9],
		            smooth: true,
		            showSymbol: false,
		            yAxisIndex:1,
		            lineStyle: {
		                normal: {
		                    width: 1
		                }
		            }
		          },
		          {
		            name: 'MA10',
		            type: 'line',
		            data: [1,5,4,7,3,3,2,8,5,5],
		            smooth: true,
		            showSymbol: false,
		            lineStyle: {
		                normal: {
		                    width: 1
		                }
		            }
		        },
			    ]
				},
				timer:''
			}
		},
		methods: {
			// drawLine() {
			// 	let myChart = this.$echarts.init(document.getElementById('container'))
			// 	// 
			// 	myChart.setOption(this.option)
			// }
		},
		mounted() {
			console.log(22222)
			// this.drawLine();
			let myChart = this.$echarts.init(document.getElementById('container'))
			myChart.setOption(this.option)
		}
	}
</script>
<style>
	html,body {
		height: 100%;
		margin: 0;
	}
	#app {
		margin: 0;
		height: 100%;
	}
</style>